<template>
  <el-select
    v-model="Val"
    v-bind="$attrs"
    style="width: 100%"
    :placeholder="placeholder"
    :clearable="clearable"
    :multiple="multiple"
    :disabled="disabled"
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="collapseTagsTooltip"
    :filterable="filterable"
  >
    <el-option v-for="item in options" :key="item[valueFiled]" :label="item[labelFiled]" :value="item[valueFiled]" />
  </el-select>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: [String, Array],
    default: () => ''
  },
  label: {
    type: String,
    default: () => ''
  },
  placeholder: {
    type: String,
    default: () => ''
  },
  clearable: {
    type: Boolean,
    default: () => true
  },
  multiple: {
    type: Boolean,
    default: () => false
  },
  disabled: {
    type: Boolean,
    default: () => false
  },
  collapseTags: {
    type: Boolean,
    default: () => true
  },
  collapseTagsTooltip: {
    type: Boolean,
    default: () => false
  },
  filterable: {
    type: Boolean,
    default: () => false
  },
  options: {
    type: Array,
    default: () => []
  },
  valueFiled: {
    type: String,
    default: 'value'
  },
  labelFiled: {
    type: String,
    default: 'label'
  }
})
const placeholder = computed(() => props.placeholder || `请选择${props.label}`)
const Val = ref(props.modelValue)
//监听父组件的值
watch(
  () => props.modelValue,
  () => {
    Val.value = props.modelValue
  }
)

// 通过emit将值传递给父组件
emit('update:modelValue', Val)
</script>
